/**
 * @fileoverview 待办：工人工费审批流 卡片
 * @description 该组件用于展示待办费用的卡片信息，包括标题、结款人、申请金额、客户名称、客户地址等信息。
 */

import dayjs from "dayjs";
import Taro from "@tarojs/taro";
import { useCreation } from "ahooks";
import { Text, View } from "@tarojs/components";

import ByRow from "../ui/ByRow";
import ByCol from "../ui/ByCol";
import ByText from "@/components/ui/ByText";
import BySquare from "@/components/ui/BySquare";
import UserItem from "@/components/app/UserItem";
import ByTag, { ByTagProps } from "@/components/ui/ByTag";

import { TaskItem } from "@/types/global";
import { objectToQueryString } from "@/utils";

type TodoCardProps = {
  source: TaskItem;

  // 筛选状态： 0.待办， 1.已办， 2.抄送 3.发起
  status?: number;
};

// ：0-进行中，1-已完成，2-已取消
const statusTextMap = {
  0: "审核中",
  1: "通过",
  2: "驳回",
};

const statusTypeMap = {
  0: "warning",
  1: "success",
  2: "error",
} as const;

const urlMap = {
  GZ: "/packageWork/pages/wages/detail",
  default: "/packageProject/pages/approve/detail",
  gc: "/packageProject/pages/engineeringFunds/detail",
  Shouhou_Apply: "/packageProject/pages/afterSales/detail",

  Shenpi_XSB: "/packageProject/pages/report/detail",
  Shenpi_QDSJF: "/packageProject/pages/report/detail",
  Shenpi_QDKGQ: "/packageProject/pages/report/detail",
  Shenpi_HDGCB: "/packageProject/pages/report/detail",
  Shenpi_HDSHB: "/packageProject/pages/report/detail",
  Shenpi_HDGCG: "/packageProject/pages/report/detail",
  Shenpi_HDSHG: "/packageProject/pages/report/detail",
  Shenpi_TDXS: "/packageProject/pages/report/detail",
  Shenpi_TDSJ: "/packageProject/pages/report/detail",
};

export default ({ source, status = 0 }: TodoCardProps) => {
  const {
    id,
    startTime,
    intentCustomerId,
    workFlowDefinitionCode: wl_code,
    business_data: { businessId },
  } = source;

  const timeView = useCreation<{
    type: ByTagProps["type"];
    text: string;
  }>(() => {
    const diffs = dayjs().diff(dayjs(startTime * 1000), "minute");

    // 1. 小于2小时，显示多少分钟
    // 2. 小于24小时，显示多少小时
    // 3. 其他，显示大于多少天
    const type = diffs < 120 ? undefined : diffs < 1440 ? "warning" : "error";

    const time = !type
      ? diffs + "分钟"
      : type == "warning"
      ? Math.floor(diffs / 60) + "小时"
      : Math.floor(diffs / 1440) + "天";

    const text =
      status > 0 ? time + (status == 1 ? "前办结" : "前处理") : "等待" + time;

    return {
      text,
      type: status == 0 ? type : undefined,
    };
  }, []);

  // 点击事件
  const handleTap = () => {
    const query = objectToQueryString({
      wl_id: id,
      wl_code,
      businessId,
      intentCustomerId,
    });

    const url = urlMap[wl_code] || urlMap.default;
    url &&
      Taro.navigateTo({
        url: `${url}?${query}`,
      });
  };

  return (
    <View
      className="mb-3 p-4 bg-white rounded-2xl shadow-black-1"
      onClick={handleTap}
    >
      <View className="flex justify-between items-center">
        <View className="flex-1 font-bold text-sm">{source.title}</View>
        {status ? (
          <ByText
            type={statusTypeMap[source.instanceState]}
            className="text-sm"
          >
            {statusTextMap[source.instanceState]}
          </ByText>
        ) : (
          <BySquare size={16} className="bg-error" />
        )}
      </View>

      {/* <View className="my-3 text-sm">
        <ByCell size="small" label="结款人:">
          {source.createUserName} ??
        </ByCell>
        <ByCell size="small" label="申请金额:">
          ¥30,000.00??
        </ByCell>
      </View> */}

      <ByRow className="my-2">
        <ByCol span={6}>{source.customerName}</ByCol>

        <ByCol span={6} className="text-right">
          <ByText size="sm" type="third" truncated>
            {source.customerAddress}
          </ByText>
        </ByCol>
      </ByRow>

      <View className="flex justify-between items-center">
        <View className="flex">
          <UserItem name={source.createUserName} size={56} />
        </View>

        {timeView.type ? (
          <ByTag
            className="text-sm"
            variant="filled"
            rounded={false}
            type={timeView.type}
          >
            {timeView.text}
          </ByTag>
        ) : (
          <Text className="text-sm">{timeView.text}</Text>
        )}
      </View>
    </View>
  );
};
